

<template>
  <!-- 购买会员页面 -->
  <view class="Mall4j buy-vip-container">
    <!-- 用户信息 -->
    <view class="top-bg">
      <view class="member-info">
        <view class="head-portrait">
          <image :src="userInfo.pic?userInfo.pic:'https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/head04.png'" />
        </view>
        <view class="text-box">
          <view class="name-box">
            <text class="name">{{ userInfo.nickName }}</text>
            <view class="level">
              <image class="l-bg" :src="userLevelInfo.levelType==1?'https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/integral-icon.png':'https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/normal-icon.png'" role="img" />
              <view class="text">{{ userLevelInfo.levelName }}</view>
            </view>
          </view>
          <view class="date">{{ userLevelInfo.levelType==1? wxs.spliceDate(userLevelInfo.endTime)+i18n.expire:i18n.notPayingMember }}</view>
        </view>
      </view>
    </view>
    <!-- /用户信息 -->

    <!-- swiper-会员套餐 -->
    <view class="vip-card-wrapper">
      <swiper class="pic-swiper" :duration="duration" previous-margin="20rpx" next-margin="70rpx" :current="selectPremiumVipIndex" @change="selectVip">
        <block v-for="(item, id) in premiumVipList" :key="id">
          <swiper-item class="banner-item">
            <view class="card-box">
              <view class="banner">
                <view class="card-face">
                  <image class="vip-pic" :src="item.img" />
                  <view :class="'level-mark  ' + (currentLevelId==item.id? '':'white-bg' )">{{ currentLevelId==item.id?i18n.current:i18n.notPurchased }}</view>
                  <view class="vip-info">
                    <view class="vip-level">{{ item.levelName }}</view>
                    <view class="vip-price">￥<text class="amount">{{ item.needAmount }}</text><text>/{{ ' ' + item.term + ' ' }}{{ ['',i18n.day,i18n.week,i18n.month,i18n.season,i18n.year][item.termType] }}</text></view>
                  </view>
                  <view class="vip-level-progress">
                    <view v-if="item.needGrowth>0" class="level-tips">
                      <text>{{ i18n.growthValueUp }} {{ item.needGrowth }} {{ i18n.readyToBuy }}</text>
                      <progress class="level-progress" :percent="item.needGrowth>0 ? (userLevelInfo.growth/item.needGrowth) *100 : 0" backgroundColor="#feeee0" activeColor="#9e642e" active="true" border-radius="8" stroke-width="4" />
                      <view class="level-span">
                        <text v-if="userLevelInfo.levelType==1 && userLevelInfo.userLevel.level<=selectPremiumVip.level">{{ userLevelInfo.userLevel.levelName }}</text>
                        <text>{{ item.levelName }}</text>
                      </view>
                    </view>
                    <view class="level-text">{{ i18n.currentGrowthValue }} {{ userLevelInfo.growth }}</view>
                  </view>
                </view>
              </view>
            </view>
          </swiper-item>
        </block>
      </swiper>
      <!-- /swiper-会员套餐 -->

      <!-- 会员权益 -->
      <view class="vip-rights-container">
        <view class="member-tit">
          <view class="text">{{ i18n.VIPLevelRights }}</view>
        </view>
        <view class="rights-item-con">
          <block v-for="(item, rightsId) in selectPremiumVip.userRights" :key="rightsId">
            <view class="rights-item">
              <view class="rights-img">
                <image mode="heightFix" :src="item.icon" />
              </view>
              <view class="rights-tit">{{ item.rightsName }}</view>
              <view class="rights-desc">{{ item.description }}</view>
            </view>
          </block>
          <view v-if="selectPremiumVip.userRights.length === 0" class="noInterests">{{ i18n.noInterests }}</view>
        </view>
      </view>
      <!-- /会员权益 -->
    </view>

    <!-- 底部按钮 -->
    <view class="bottom">
      <view class="bottom-item">
        <view class="vip-price">
          <text class="vip-total-balck">{{ i18n.totalPrice }}：</text>
          <text class="symbol">￥</text>
          <text class="amount pay-amount">{{ selectPremiumVip.needAmount }}</text>/{{ ' ' + selectPremiumVip.term + ' ' }}{{ ['',i18n.day,i18n.week,i18n.month,i18n.season,i18n.year][selectPremiumVip.termType] }}
        </view>
      </view>
      <view v-if="userLevelInfo.userLevel" :class="['sub-btn',((userLevelInfo.levelType==0 && currentGrowth >= selectPremiumVip.needGrowth) || (userLevelInfo.levelType==1 && currentGrowth >= selectPremiumVip.needGrowth && userLevelInfo.userLevel.level <= selectPremiumVip.level)?'btn':'btn-gray')]" @tap="buyNow">{{ i18n.buyNow }}</view>
    </view>
    <!-- 购买会员弹出层:支付类型选择 -->
    <view v-if="popupShow" class="popup-hide">
      <view class="popup-box radius">
        <view class="popup-tit radius">
          <text>{{ i18n.choosePaymentMethod }}</text>
          <text class="close" @tap="closePopup" />
        </view>
        <view class="popup-cnt pay-way">
          <view class="ways">
            <radio-group @change="handleRadioChange">
              <!-- #ifdef H5 -->
              <label>
                <view v-if="!isWechat" class="item" @tap="payType = PayTypeConstant.ALIPAY_H5">
                  <view class="pay-name">
                    <view class="img">
                      <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/alipay.png" mode="" />
                    </view>
                    <view class="name">{{ i18n.PayWithAli }}</view>
                  </view>
                  <view class="check">
                    <radio :checked="payType==PayTypeConstant.ALIPAY_H5" />
                  </view>
                </view>
              </label>
              <label>
                <view v-if="isWechat" class="item" @tap="payType = PayTypeConstant.WECHATPAY_MP">
                  <view class="pay-name">
                    <view class="img">
                      <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/wxpay.png" mode="" />
                    </view>
                    <view class="name">{{ i18n.payWithWeChat }}</view>
                  </view>
                  <view class="check">
                    <radio :checked="payType==PayTypeConstant.WECHATPAY_MP" />
                  </view>
                </view>
              </label>
              <label>
                <view v-if="!isWechat" class="item" @tap="payType = PayTypeConstant.WECHATPAY_H5">
                  <view class="pay-name">
                    <view class="img">
                      <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/wxpay.png" mode="" />
                    </view>
                    <view class="name">{{ i18n.payWithWeChat }}</view>
                  </view>
                  <view class="check">
                    <radio :checked="payType==PayTypeConstant.WECHATPAY_H5" />
                  </view>
                </view>
              </label>
              <!-- <view class="item" >
								<view class="pay-name">
									<view class="img"><image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/unionpay.png" mode=""></image></view>
									<view class="name">银行卡快捷支付</view>
								</view>
								<view class="check">
									<radio></radio>
								</view>
							</view> -->
              <!-- #endif -->
              <!-- #ifdef APP-PLUS -->
              <label>
                <view class="item" @tap="payType = PayTypeConstant.ALIPAY_APP">
                  <view class="pay-name">
                    <view class="img">
                      <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/alipay.png" mode="" />
                    </view>
                    <view class="name">{{ i18n.PayWithAli }}</view>
                  </view>
                  <view class="check">
                    <radio :checked="payType==PayTypeConstant.ALIPAY_APP" />
                  </view>
                </view>
              </label>
              <label>
                <view class="item" @tap="payType = PayTypeConstant.WECHATPAY_APP">
                  <view class="pay-name">
                    <view class="img">
                      <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/wxpay.png" mode="" />
                    </view>
                    <view class="name">{{ i18n.payWithWeChat }}</view>
                  </view>
                  <view class="check">
                    <radio :checked="payType==PayTypeConstant.WECHATPAY_APP" />
                  </view>
                </view>
              </label>
              <!-- #endif -->
              <!-- #ifdef MP-WEIXIN -->
              <label>
                <view class="item" @tap="payType = PayTypeConstant.WECHATPAY">
                  <view class="pay-name">
                    <view class="img">
                      <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/wxpay.png" mode="" />
                    </view>
                    <view class="name">{{ i18n.payWithWeChat }}</view>
                  </view>
                  <view class="check">
                    <radio :checked="payType==PayTypeConstant.WECHATPAY" />
                  </view>
                </view>
              </label>
              <!-- #endif -->
              <!-- 余额支付 -->
              <label>
                <view class="item" @tap="payType = PayTypeConstant.BALANCEPAY">
                  <view class="pay-name">
                    <view class="img">
                      <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/balancePay.png" mode="" />
                    </view>
                    <view class="name">{{ i18n.balancePay }}</view>
                  </view>
                  <view class="check">
                    <radio :checked="payType==PayTypeConstant.BALANCEPAY" />
                  </view>
                </view>
              </label>
              <!-- 余额支付 end -->
            </radio-group>
          </view>
          <view class="sure-pay" @tap="toPay">{{ i18n.determinePayment }}</view>
        </view>
      </view>
    </view>
  </view>

</template>

<script module="wxs" lang="wxs" src="../../../wxs/number.wxs"></script>

<script>
// pages/buy-vip/buy-vip.js
var http = require("../../../utils/http.js");
var config = require("../../../utils/config.js");
import {
  PayType,
  AppType
} from "../../../utils/constant.js";
import Wechat from "../../../utils/wechat.js";
import Pay from "../../../utils/pay.js";
export default {
  data () {
    return {
      isWechat: false,  //是否为微信环境
      payType: PayType.ALIPAY_H5,  //支付类型，默认支付宝
      PayTypeConstant: PayType,  //支付类型常量
      popupShow: false,
      duration: 1000,
      userInfo: {},
      userLevelInfo: {},
      // 当前会员信息
      premiumVipList: [],
      // 付费会员等级列表
      currentLevelId: 0,
      selectPremiumVip: {},
      currentGrowth: "",
      selectPremiumVipIndex: '',
      // 当前选择的付费会员id
      selectPremiumVipId: 0
    };
  },

  components: {},
  props: {},

  computed: {
    i18n () {
      return this.$t('index')
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // #ifdef H5
    this.isWechat = Wechat.isWechat()
    // #endif
    // #ifdef APP-PLUS
    this.payType = PayType.ALIPAY_APP
    // #endif
    // #ifdef MP-WEIXIN
    this.payType = PayType.WECHATPAY
    // #endif
    if (this.isWechat) {
      // 如果是微信环境打开,使用公众号支付
      this.payType = PayType.WECHATPAY_MP
    }
    if (options.buyVipSuccess == '1') {
      // 购买会员
      uni.showModal({
        title: i18n.t('index.purchaseSuccessful'),
        cancelText: i18n.t('index.cancel'),
        confirmText: i18n.t('index.confirm'),
        showCancel: false,
      })
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.setData({});
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //头部导航标题
    uni.setNavigationBarTitle({
      title: this.i18n.membershipCentre
    });

    // 获取会员信息
    this.getUserLevelInfo()
    // 获取用户信息
    this.getUserInfo()

    // 获取年费会员列表
    this.getPayMemberList()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () { },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () { },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () { },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () { },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () { },
  methods: {
    /**
     * 变更支付方式
     */
    handleRadioChange () {
      setTimeout(() => {
        console.log(this.payType)
      }, 500)
    },

    /**
     * 关闭支付类型选择弹窗
     */
    closePopup: function () {
      this.setData({
        popupShow: false,
      });
    },

    /**
     * 获取当前会员信息
     */
    getUserLevelInfo () {
      var params = {
        url: '/p/score/scoreLevel/page',
        method: 'GET',
        data: {
          levelType: 0
        },
        callBack: res => {
          this.setData({
            userLevelInfo: res,
            currentLevelId: res.userLevel.id,
            currentGrowth: res.growth
          });
        }
      };
      http.request(params);
    },

    /**
     * 获取年费会员列表
     */
    getPayMemberList () {
      var params = {
        url: '/p/score/scoreLevel/page',
        method: 'GET',
        data: {
          levelType: 1
        },
        callBack: res => {
          this.premiumVipList = res.userLevels
          let flag = false
          for (let i = 0; i < res.userLevels.length; i++) {
            const el = res.userLevels[i];
            if (el.id == this.selectPremiumVipId) {
              this.selectPremiumVip = el
              this.selectPremiumVipId = el.id
              this.selectPremiumVipIndex = i
              flag = true
              break
            }
          }
          if (!flag) {
            this.selectPremiumVip = res.userLevels[0]
            this.selectPremiumVipId = res.userLevels[0].id
            this.selectPremiumVipIndex = 0
            this.popupShow = false
          }
        }
      };
      http.request(params);
    },

    /**
     * 立即购买- 根据当前付费会员id
     */
    buyNow () {
      // 成长值不足
      if (this.currentGrowth < this.selectPremiumVip.needGrowth) {
        uni.showToast({
          title: this.i18n.growthValueTips,
          icon: 'none'
        });
        return
      }
      // 已有付费会员时购买低级付费会员
      if (this.userLevelInfo.levelType == 1 && this.userLevelInfo.userLevel.level > this.selectPremiumVip.level) {
        return
      }

      // 已有付费会员时购买(同级或更高级)付费会员
      if (this.userLevelInfo.levelType == 1 && this.userLevelInfo.userLevel.level < this.selectPremiumVip.level) {
        uni.showModal({
          title: this.i18n.tips,
          content: this.i18n.upgradeMemberTips1 + this.userLevelInfo.userLevel.levelName + ',' + this.i18n.upgradeMemberTips2 + this.selectPremiumVip.levelName + ',' + this.i18n.upgradeMemberTips3,
          cancelText: this.i18n.cancel,
          confirmText: this.i18n.confirm,
          success: res => {
            if (res.confirm) {
              this.popupShow = true
            } else { }
          }
        });
        return;
      }
      this.popupShow = true
    },

    // 去支付 - 购买会员
    toPay: function () {
      if (this.payType == 9) {
        uni.showModal({
          title: this.i18n.tips,
          content: this.i18n.confirmBalancePay,
          showCancel: true,//是否显示取消按钮
          cancelText: this.i18n.cancel,
          confirmText: this.i18n.confirm,
          success: (res) => {
            if (res.confirm) {
              //点击确定
              Pay.toOrderPay(this.payType, '', '', '', this.selectPremiumVip.id)
            } else if (res.cancel) {
              console.log('用户点击取消');
              uni.showToast({
                title: this.i18n.cancelBalancePay,
                icon: 'none',
                duration: 1500
              });
            }
          },
        })
        return
      }
      Pay.toOrderPay(this.payType, '', '', '', this.selectPremiumVip.id)
    },

    /**
     * 购买会员 - 弃用
     */
    buyVip () {
      const isOA = uni.getStorageSync('appType') == AppType.MP; // 是否微信内环境
      var payType = isOA ? PayType.WECHATPAY_MP : PayType.WECHATPAY_H5
      var params = {
        url: '/p/level/payLevel',
        method: 'POST',
        data: {
          id: this.selectPremiumVip.id,
          scene: '',
          payType: payType, //支付方式 (1:微信小程序支付 2:支付宝 3微信扫码支付 4 微信h5支付)
        },
        callBack: res => {
          Pay.toPay({
            payType: payType,
            paydata: res,
            cb: () => {
              this.getUserLevelInfo();
            }
          })
        }
      };
      http.request(params);
    },

    /**
     * 切换轮播图
     */
    selectVip (e) {
      this.setData({
        selectPremiumVipIndex: e.detail.current,
        selectPremiumVip: this.premiumVipList[e.detail.current],
        selectPremiumVipId: this.premiumVipList[e.detail.current].id
      });
    },
    /**
     * 获取用户信息
     */
    getUserInfo () {
      const params = {
        url: "/p/user/userInfo",
        method: "GET",
        callBack: (res) => {
          uni.hideLoading();
          this.userInfo = res
        }
      };
      http.request(params);
    }

  }
};
</script>
<style>
@import "./buy-vip.css";
</style>
